<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<script>
function compose (middlewares, ctx) {
  function dispath(idx) {
    if (idx === middlewares.length) {
      return 1
    }
    let fn = middlewares[idx]
    return Promise.resolve(fn(ctx, () => dispath(idx + 1)))
  }
  dispath(0)
}

function f1 (ctx, next) {
  console.log('f11')
  next()
  console.log('f12')
}
function f2 (ctx, next) {
  console.log('f21')
  next()
  console.log('f22')
}
function f3 (ctx, next) {
  console.log('f31')
  next()
  console.log('f32')
}

compose([f1, f2, f3], '111')
</script>
</body>
</html>
